<template>
    <div>

        <el-select
            v-model="dictValue"
            :multiple="multiple"
            :clearable="isClearable"
            :placeholder="placeholder"
            filterable
            default-first-option
            size="medium"
            :style="styles">

            <template v-for="(item, key) in datas" >
                <el-option
                    :disabled="!item.status"
                    :label="item.label"
                    :value="item.value"
                    no-data-text="无数据"/>
            </template>

        </el-select>
    </div>
</template>

<script>
export default {
    props: {
        // 字典编码
        code: {
            type: String,
            default: null
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: false
        },
        // 是否需要清除图标
        isClearable: {
            type: Boolean,
            default: true
        },
        // 提示句
        placeholder: {
            type: String,
            default: '请选择'
        },
        styles:{
            type: String,
            default: 'width: 80%;'
        },

        // 编辑时填充的值
        selectVal: null

    },
    data() {
        return {
            tagType: 'list',    // 选择器类型
            datas: [],          // 字典数据
            dictValue: null,    // 字典选择的值
        }
    },

    watch: {
        // 更新父组件的值
        dictValue(val){
            this.$emit("update:selectVal", val)
        },

        // 编辑时填充值
        selectVal(val) {
            if(val == null) {
                this.dictValue = null
            } else {
                this.dictValue = val+''
            }
        }
    },

    created() {
        this.tagType = this.type
    },

    mounted() {
    	this.$nextTick(function () {
	        this.handleGetDict()
    	})
    },

    methods: {
        handleGetDict() {
            this.$http({
                url: '/system/dict/getDictByCodeList',
                method: 'POST',
                data: {code: this.code}
            }).then(res => {
                this.datas = Object.assign({}, res.data)
            })

        },

        // 重置按钮调用清空
        clearVal() {
            this.dictValue = null
        }
    }
};
</script>

<style lang="scss" scoped></style>
